<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../lib/vue/vue.min.js" ></script>
	</head>
	<body>
	<div id="app">
		<form id="mf" action="#" >
			<input name="name" v-model="name"/>
			<input name="password_o" v-model="password_o"/>
			<input name="name" v-model="user.name"/>
			<span>{{user.name}}</span>
			<input name="name" v-model="user.fakeName"/>{{user.fakeName}}
			<button @click="btnSave()">提交</button>
		</form>	
	</div>
	<script>
		console.log("--------------");
			console.log({
				name:"bart",
				user:JSON.stringify({"name":"lisa","age":"15"})
			})
		
		
		new Vue({
			el:"#app",
			data:{
				name:"",
				password_o:"",
				reg:{
					reg1:/(^\s*)|(\s*$)/g ,//验证空格
					reg2:/^[\u4e00-\u9fa5A-Za-z0-9\-]*$/ //只能中英文，数字，下划线，减号
				},
				user:{}
			},
			methods:{
				btnSave:function(){
					if(!this.reg.reg1.test(this.name)){  //验证第一个框
						alert("错误提示")
						return false
					}else if(!this.reg.reg1.test(this.password_o)){  //验证第一个框
						alert("错误提示")
						return false
					}else{
						$.ajax({
						               //请求后台
						})
					}
					return false
				}
			},
			watch:{
				name:function(n,o){
					console.log(n);
				},
				user :{ 
					handler:function(n,o){
						console.log(n,o);
					},
					deep:true
				},
				'user.name': function(n,o){
					console.log('user.name',n,o);
				}
			}
			
		})
		
		
		
	</script>
		
	</body>

</html>
